<template>
  <div class="banner">
    {{ album.albumName }}<br>
    <span style="font-weight: bolder;font-size: 0.4em">{{ album.albumDescription }}</span>
  </div>
  <br>
  <el-row>
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <div class="albums">
        <el-space wrap size="large">
          <el-image v-for="(pic,index) in pictures"
                    :src="pic.pictureUrl"
                    :preview-src-list="srcList"
                    :initial-index="index"
                    style="height: 200px;border: 1px solid #eeeeee" fit="cover"></el-image>
        </el-space>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Picture",
  props: ['albumId'],
  computed: {
    srcList() {
      let srcList = []
      this.pictures.forEach(pic => {
        srcList.push(pic.pictureUrl)
      })
      return srcList
    }
  },
  async created() {
    let {data: result1} = await this.$http.get("/api/picture/getPicturesByAlbumID", {params: {albumId: this.albumId}})
    this.pictures = result1.dataMap.pictureList

    let {data: result2} = await this.$http.get("/api/album/getAlbumById", {params: {id: this.albumId}})
    this.album = result2

  },
  data() {
    return {
      pictures: [],
      album: {}
    }
  }
}
</script>

<style scoped>
.banner {
  background-image: url('/headImg/picture.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}

.albums {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 1px solid #90adab;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*height: 200px;*/
  padding: 40px;
}
</style>